import React, { useEffect, useRef, useState } from 'react';
import { Tag, Card, Space, Popover, Form, Button, Dropdown } from 'antd';
import { connect } from 'umi';
import { PlusCircleOutlined, EllipsisOutlined } from '@ant-design/icons'
import FormCondition from '@/components/FormCondition';
const TreeSetting = (props) => {
  const { data, loading, activeTabKey, reload, dispatch, editVisible = {}, setEditVisible, visible = {}, setVisible } = props
  const { id, categoryName } = data
  const TreeSettingFrom = (props) => {
    const { setVisible, visible = {} } = props
    const { show = false, type = 'install' } = visible
    const [form] = Form.useForm();
    const formItems = [
      {
        label: '类别',
        name: 'categoryName',
      },
    ];
    return <Space onClick={(e) => {
      e.stopPropagation()
    }} direction='vertical'>
      <FormCondition form={form} formItems={formItems} initialValues={type === 'install' ? {} : {
        categoryName
      }}></FormCondition>
      <Space align='end' style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
        <Button onClick={(e) => {
          e.stopPropagation()
          setVisible({ ['show' + id]: false })
          setEditVisible({ ['show' + id]: false })
        }}>取消</Button>
        <Button loading={loading} onClick={(e) => {
          e.stopPropagation()
          form.validateFields().then((values) => {
            const payload = type === 'install' ? {
              ...values,
              parentId: id ? id : 0,
              categoryType: activeTabKey
            } : {
              ...values,
              id: id,
              categoryType: activeTabKey
            }
            dispatch({
              type: 'liveStreaming/fakeHandleCategory',
              payload: payload,
              callback: () => {
                setVisible({ ['show' + id]: false })
                setEditVisible({ ['show' + id]: false })
                reload();
              },
            });
          });

        }} type='primary'>确定</Button>
      </Space>
    </Space>
  }
  const items = [
    {
      key: '1',
      label: (
        <Button onClick={(e) => {
          e.stopPropagation();
          setVisible({ ['show' + id]: false })
          setEditVisible({ type: 'edit', ['show' + id]: true })
        }} type='link'>重命名</Button>
      ),
    },
    {
      key: '2',
      label: (
        <Button type='link' onClick={(e) => {
          e.stopPropagation();
          setVisible(false)
          dispatch({
            type: 'liveStreaming/fakeDeleteMaterialCategory',
            payload: { id: id },
            callback: (e) => {
              reload()
            },
          });
        }}>删除</Button>
      ),
    },
  ];
  return (
    <Space>
      <Popover trigger='click' placement="bottom" content={<TreeSettingFrom visible={visible} setVisible={setVisible}></TreeSettingFrom>} open={visible['show' + id]}>
        <PlusCircleOutlined onClick={(e) => {
          e.stopPropagation()
          setVisible({ type: 'install', ['show' + id]: true })
        }}></PlusCircleOutlined>
      </Popover>
      {id && <Dropdown
        menu={{
          items,
        }}
        placement="bottom"
      >
        <Popover trigger='click' placement="bottom" content={<TreeSettingFrom visible={editVisible} setVisible={setEditVisible}></TreeSettingFrom>} open={editVisible['show' + id]}>
          <EllipsisOutlined onClick={(e) => {
            e.stopPropagation()
          }}></EllipsisOutlined>
        </Popover>

      </Dropdown>
      }

    </Space>
  )
}
export default connect(({ loading }) => ({
  loading: loading.effects['liveStreaming/fakeHandleCategory'],
}))(TreeSetting); 